/* eslint-disable react/forbid-prop-types */
import React, {useEffect, useCallback} from 'react';
import {Form} from 'antd';
import {useCreation} from 'ahooks';
import omit from 'omit.js';
import dayjs from 'dayjs';
import PropTypes from 'prop-types';
// 弹出框的表单比较常见，所以封装了一个通用组件
import ModalForm, {ModalFormProps} from '@/components/ModalForm';

// 语义化
export const ADD_TYPE = '1';
export const EDIT_TYPE = '2';

const type2title = {
    [ADD_TYPE]: '新增',
    [EDIT_TYPE]: '编辑',
};


export interface EditFormProps extends ModalFormProps {
    type: string;
    departmentList: API.CommonFilterItem;
    gradeList: API.CommonFilterItem;
    record: API.CurdItem;
}

const EditForm: React.FC<EditFormProps> = props => {
    const {onOk, type, record, departmentList, gradeList} = props;

    // 表单的用法，可配置
    const [form] = Form.useForm();

    useEffect(() => {
        if (type === EDIT_TYPE && record) {
            const {gradeNumber, departmentNumber, beginTime, teacherName} = record || {};
            form.setFieldsValue({
                gradeNumber,
                departmentNumber,
                beginTime: dayjs(beginTime),
                teacherName
            });
        }
    }, [record, form, type]);

    // 配置表单项
    const formItems = useCreation(() => [
        {
            label: '学部',
            key: 'departmentNumber',
            type: 'select',
            rules: [{required: true, message: '请选择学部！'}],
            props: {
                // 注意容错
                options: departmentList || [],
                placeholder: '请选择学部',
            }
        },
        {
            label: '年级',
            key: 'gradeNumber',
            type: 'select',
            rules: [{required: true, message: '请选择年级！'}],
            props: {
                // 注意容错
                options: gradeList || [],
                placeholder: '请选择年级',
            }
        },
        {
            label: '辅导老师',
            key: 'teacherName',
            type: 'input',
            props: {
                placeholder: '请输入老师姓名'
            }
        },
        {
            label: '开课日期',
            key: 'beginTime',
            type: 'datePicker',
            props: {
                format: 'YYYY-MM-DD',
                style: {width: '100%'}
            }
        },
    ], [departmentList, gradeList]);
    // useCreation or useCallback
    const handleFinish = useCallback((params = {}) => {
        const payload = {...params};
        // 时间类型单独处理
        if (params?.date) {
            payload.date = params.date.valueOf();
        }
        // 注意容错
        if (typeof onOk === 'function') {
            onOk(payload);
        }
    }, [onOk]);

    return (
        <ModalForm
            form={form}
            title={type2title[type]}
            // @ts-ignore
            formItems={formItems}
            onOk={handleFinish}
            {...omit(props, [
                'onFinish',
                'type',
                'title',
                'onOk',
                'departmentList',
                'gradeList',
            ])}
        />
    );
};

export default EditForm;
